<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>欢迎页</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 数据统计 -->
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="statistics" style="background: #409eff">
          <div class="title">
            <p>用户统计</p>
            <el-tag size="mini" type="success">实时</el-tag>
          </div>
          <div class="num">{{ totalUsers }}</div>
          <div class="tip">当前中用户数量</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics" style="background: #e6a23c">
          <div class="title">
            <p>商品统计</p>
            <el-tag size="mini" type="info">实时</el-tag>
          </div>
          <div class="num">{{ totalGoods }}</div>
          <div class="tip">当前总商品数量</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics" style="background: #67c23a">
          <div class="title">
            <p>订单统计</p>
            <el-tag size="mini" type="warning">实时</el-tag>
          </div>
          <div class="num">{{ totalOrders }}</div>
          <div class="tip">当前总订单数量</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics" style="background: #909399">
          <div class="title">
            <p>销售统计</p>
            <el-tag size="mini" type="primary">实时</el-tag>
          </div>
          <div class="num">{{ totalSales }}</div>
          <div class="tip">当前总销售额（元）</div>
        </div>
      </el-col>
    </el-row>
    <!-- 图片展示 -->
    <div class="echarts-container">
      <el-card id="chart1"></el-card>
      <el-card id="chart2"></el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      totalUsers: 0,
      totalGoods: 0,
      totalOrders: 0,
      totalSales: 0,
      orderList: [],
    };
  },
  created() {
    this.getUserList();
    this.gerGoodsList();
    this.getOrdersList();
  },
  methods: {
    async getUserList() {
      const { data: res } = await this.$http.get("users", {
        params: {
          pagenum: 1,
          pagesize: 1,
        },
      });
      if (res.meta.status != 200) {
        return this.$message.error("获取用户数据失败");
      }
      this.totalUsers = res.data.total;
    },
    async gerGoodsList() {
      const { data: res } = await this.$http.get("goods", {
        params: {
          pagenum: 1,
          pagesize: 1,
        },
      });
      if (res.meta.status != 200) {
        return this.$message.error("获取商品数据失败");
      }
      this.totalGoods = res.data.total;
    },
    async getOrdersList() {
      const { data: res } = await this.$http.get("orders");
      if (res.meta.status != 200) {
        return this.$message.error("获取订单数据失败");
      }
      this.totalOrders = res.data.total;
      //计算总的销售额
      this.orderList = res.data.goods;
      this.orderList.forEach((item) => {
        if (item.pay_status == "1") {
          this.totalSales += item.order_price;
        }
      });
      // 展示图表
      this.initChart1();
      this.initChart2();
    },
    initChart1() {
      var chart1 = echarts.init(document.getElementById("chart1"));
      var option = {
        title: {
          text: "订单趋势",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "line",
            smooth: true,
            data: [],
          },
        ],
      };
      //对数据进行处理
      //1.数据排序(升序)
      this.orderList.sort((a, b) => {
        return a.create_time - b.create_time;
      });
      //2.获取到日期及订单总额
      let data = [];
      this.orderList.forEach((item) => {
        if (item.pay_status == "1") {
          let key = this.$utils.formatToDate(item.create_time);
          if (!data[key]) {
            data[key] = item.order_price;
          } else {
            data[key] += item.order_price;
          }
        }
      });
      //3.将数据更新到option中
      for (var key in data) {
        option.xAxis.data.push(key);
        option.series[0].data.push(data[key]);
      }
      chart1.setOption(option);
    },
    initChart2() {
      var chart2 = echarts.init(document.getElementById("chart2"));
      // 订单状态
      var option = {
        title: {
          text: "订单状态",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "right",
          data: [],
        },
        series: [
          {
            name: "订单状态",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      //对数据进行处理
      var data = [
        {
          name: "已付款",
          value: 0,
        },
        {
          name: "未付款",
          value: 0,
        },
      ];
      this.orderList.forEach((item) => {
        if (item.pay_status == "1") {
          data[0].value++;
        } else {
          data[1].value++;
        }
      });
      for (var item of data) {
        option.legend.data.push(item.name);
        option.series[0].data.push(item);
      }
      chart2.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.el-row {
  padding: 0 9px;
  .statistics {
    color: #fff;
    height: 100px;
    border-radius: 4px;
    padding: 0 8px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        font-size: 13px;
        font-weight: bold;
      }
    }
    .num {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }
    .tip {
      font-size: 12px;
    }
  }
}
.echarts-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  .el-card {
    height: 400px;
    width: 50%;
    margin: 0 8px;
    padding: 20px;
  }
}
</style>
